<template>
  <!-- 输入框 -->
  <div class="mb-10">
    <el-row :gutter="10">
      <el-col :span="24" :md="10" :lg="10" :xl="10">
        <el-row>
          <el-col :span="12">
            <el-input
              v-model.trim="username"
              placeholder="请输入用户名称"
              suffix-icon="Search"
              @keyup.enter="load"
              @keyup.esc="name = ''"
          /></el-col>
          <el-col :span="12">
            <el-button class="ml-5" type="primary" @click="load"
              >搜索</el-button
            >
            <el-button type="primary" @click="clears">重置</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>

  <!-- 按钮 -->
  <div class="m1-10 df">
    <el-button type="primary" @click="handleadd"
      >新增<el-icon class="ml-5" size="20px"><CirclePlus /></el-icon
    ></el-button>
    <el-popconfirm
      width="220"
      confirm-button-text="确定"
      cancel-button-text="我再想想"
      icon="InfoFilled"
      icon-color="red"
      title="您确定批量删除这些数据吗?"
      @confirm="delBatch"
      ><template #reference>
        <el-button type="danger"
          >批量删除<el-icon class="ml-10" size="20px"><Remove /></el-icon
        ></el-button> </template
    ></el-popconfirm>
  </div>

  <!-- 表单 -->
  <div class="role_table">
    <!--selection-change 当选择项发生变化时会触发该事件 -->
    <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="username" label="名字" width="100" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="card" label="就诊卡号" width="100" />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column prop="result" label="结果" width="100" />

      <!-- <el-table-column prop="uid" label="用户id" width="100" /> -->

      <el-table-column label="操作" min-width="200px">
        <template v-slot:default="scope">
          <el-button type="success" @click="handleEdit(scope.row)"
            >编辑<el-icon class="ml-5"><Edit /></el-icon
          ></el-button>

          <!-- 气泡确认框 删除确认框 -->
          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="InfoFilled"
            icon-color="red"
            title="您确定删除吗?"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger"
                >删除<el-icon class="ml-5"><Delete /></el-icon
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="pageNum"
      v-model="pageSize"
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :small="small"
      :disabled="disabled"
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="用户信息" width="30%">
    <el-form :label-width="formLabelWidth">
      <el-form-item label="用户">
        <el-select
          v-model.trim="form.uid"
          class="m-2"
          placeholder="请选择用户"
          size="large"
        >
          <el-option
            v-for="item in useroptions"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="就诊卡号">
        <el-input
          v-model.trim="form.card"
          autocomplete="off"
          placeholder="请输就诊卡号"
          size="large"
          clearable
        />
      </el-form-item>

      <el-form-item label="类型">
        <el-select
          v-model.trim="form.type"
          class="m-2"
          placeholder="请选择类型"
          size="large"
        >
          <el-option
            v-for="item in typeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="结果">
        <el-select
          v-model.trim="form.result"
          class="m-2"
          placeholder="请选择类型"
          size="large"
        >
          <el-option
            v-for="item in resultoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save_info"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
export default {
  name: 'hesuan-tables',
  data() {
    return {
      tableData: [],
      //   分页器
      pageNum: 1,
      pageSize: 10,
      small: false,
      disabled: false,
      background: false,
      total: 0,

      // 分页查询-输入框
      username: '',

      // 弹窗
      dialogFormVisible: false,
      dialogFormVisibleMenu: false,
      formLabelWidth: '80px',
      form: {
        // name: '',
        // remark: ''
      },
      // 批量删除
      multipleSelection: [],

      user: localStorage.getItem('user')
        ? JSON.parse(localStorage.getItem('user'))
        : {},

      // 总体用户
      useroptions: [],
      // 类型
      typeoptions: [
        {
          value: '混检',
          label: '混检'
        },
        {
          value: '个测',
          label: '个测'
        },
        {
          value: '咽式嗓子',
          label: '咽式嗓子'
        }
      ],
      resultoptions: [
        {
          value: '阴性',
          label: '阴性'
        },
        {
          value: '阳性',
          label: '阳性'
        }
      ]
    }
  },
  created() {
    // 请求分页查询的数据
    this.load()
  },
  
  methods: {
    // 分页
    handleSizeChange(pageSize) {
      console.log('页数:' + pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log('每页的数据：' + pageNum)
      this.pageNum = pageNum
      this.load()
    },

    // 请求分页查询的数据
    load() {
      console.log(this.tab)
      this.$http
        .get('/hesuan/page', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            username: this.username
          }
        })
        .then((res) => {
          console.log('当前分页')
          console.log(res)
          console.log('分页类型' + typeof res)
          // console.log(res)
          this.tableData = res.data.records
          this.total = res.data.total
        })

      this.$http.get('/user').then((res) => {
        console.log(res)
        this.useroptions = res.data
      })
    },
    // 重置
    clears() {
      this.username = ''
      this.phone = ''
      this.load()
    },
    // 弹窗
    handleadd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    // 新增数据
    save_info() {
      var b = JSON.stringify(this.form)
      if (b != '{}') {
        this.$http.post('/hesuan', this.form).then((res) => {
          console.log(res)
          if (res.status == '200') {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            // 刷新页面数据
            this.load()
          }
        })
      } else {
        this.$message.error('保存失败')
      }
    },
    // 编辑
    handleEdit(row) {
      console.log(row)
      // 当前的值赋予到form对象中
      // row是proxy 需要转化为json
      this.form = JSON.parse(JSON.stringify(row))
      console.log(this.form)
      // this.handleTest(row)
      // this.form = JSON.parse(JSON.stringify(row));
      // 打开弹窗
      this.dialogFormVisible = true
    },

    // 删除
    del(id) {
      this.$http.delete('/hesuan/' + id).then((res) => {
        console.log(res)
        if (res.data) {
          this.$message.success('删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 批量删除
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      // 对象数组变成 纯id的数组
      let ids = this.multipleSelection.map((v) => v.id) //[{},{},{}]=>[1,2,3]
      console.log(ids)

      this.$http.delete('/hesuan/del/batch', { data: ids }).then((res) => {
        console.log(res)

        if (res.data) {
          this.$message.success('批量删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('批量删除失败')
        }
      })
    },

    myclear() {
      console.log('清理中')
    }
  }
}
</script>
  
  <style lang="less" scoped>
// 分页
.demo-pagination-block {
  padding: 10px;
}

// 弹窗
</style>